@import '~theme/helpers';

:host {
  font-family: "Roboto", sans-serif;

  p {
    font-weight: 300;
  }

  ul,
  ol,
  dd {
    font-weight: 300;
  }

  ul,
  ol {
    padding-left: 16px;
    margin: 0;
  }

  .mdl-card {
    height: auto;
    width: 100%;

    &:not(:last-child) {
      margin-bottom: $card-vertical-padding;
    }

    &:first-child p {
      font-size: 30px;
      line-height: 1.5;

      &:nth-of-type(1) {
        font-weight: 200;
        margin-top: 20px;
      }

      &:nth-of-type(2) {
        font-weight: 300;
      }

      &:nth-of-type(3) {
        font-weight: 400;
      }

      &:nth-of-type(4) {
        font-weight: 500;
      }

      &:nth-of-type(5) {
        font-weight: 600;
      }
    }

    .mdl-card__supporting-text div {
      &:nth-child(2) {
        text-align: center;
      }

      &:nth-child(3) {
        text-align: right;
      }
    }
  }

  .mdl-grid + .mdl-grid .mdl-cell {
    &:nth-child(3) {
      .mdl-card__supporting-text > ul {
        list-style: none;
        padding-left: 0;
      }
    }

    &:nth-child(4) {
      .mdl-card__supporting-text > ol li {
        float: left;
        margin-right: 25px;
      }
    }
  }

  .text-color--gray + h5 {
    margin-top: 14px;
  }

  dd {
    margin-left: 0;

    & + dt {
      margin-top: 10px;
    }
  }

  h1 {
    margin-top: 0;
  }
}
